<template>
	<view class="all">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead goback='gobackF' background="#EE515A" title='我的申购' searchTip=''></searchHead>
		<view>
			<u-toast ref="uToast" />
		</view>
		<view v-if="!network">
			<image class="not_network" src="@/static/imgs/qidongye_slices/7.png" mode=""></image>
		</view>
		<view v-if="network">
			<view v-if="data.length>0">
				<view v-for="(item,index) in data" :key="index" style="background-color: #FFFFFF;">
					<u-row gutter="12" class="padding">
						<u-col span="6" style="margin-top: 5px;font-weight: bold;">{{item.sname}}<text style="color:#333333;padding-left: 0.8rem;">({{item.scode}})</text>
						</u-col>
						<u-col span="6" style="font-size: 16px;color: #f44;margin-top: 5px;text-align: right;">
							<text style="border: 1px solid #F44;padding: 5rpx 10rpx;border-radius: 4rpx;font-size: 24rpx;">{{item.statusName}}</text>
						</u-col>
					</u-row>
					<uni-row gutter="12" class='flex flx-bet' style="padding: 0;overflow: hidden;">
						<uni-col span='3' class='flex flex-f1 flx-col flex-ac'>
							<text class="txt-2 txt-EE515A">{{item.snum}}</text>
							<text class="txt-3">申购数量</text>
						</uni-col>
						<uni-col span='3' class='flex flex-f1 flx-col flex-ac'>
							<text class="txt-2">{{item.smoney}}</text>
							<text class="txt-3">发行价</text>
						</uni-col>
						<uni-col span='3' class='flex flex-f1 flx-col flex-ac'>
							<text class="txt-2">{{(item.smoney*item.agreenum + item.buyFee).toFixed(2)}}</text>
							<text class="txt-3">冻结资金</text>
						</uni-col>
						<uni-col span='3' class='flex flex-f1 flx-col flex-ac'>
							<text style="text-overflow: ellipsis;width: 180rpx;overflow: hidden;white-space: nowrap;" class="txt-2">{{item.atime}}</text>
							<text class="txt-3">申购日期</text>
						</uni-col>
					</uni-row>
					
					<!-- 原本的 -->
					<view style="margin-top: 10px;" class="none">
						<u-line color="hsla(0,0%,60%,.239)" />
					</view>
					<u-row gutter="12" class="padding none" style="font-size: 16px;">
						<u-col span="6">
							<text>申购价格:<span style="color: #409eff;">{{item.smoney}}</span></text>
						</u-col>
						<u-col span="6">
							<text>申购数量:<span style="color: #409eff;">{{item.snum}}</span></text>
						</u-col>
					</u-row>
					<u-row gutter="12" class="padding none" style="font-size: 16px;">
						<u-col span="6">
							<text>支付金额:<span style="color: #409eff;">{{(item.smoney*item.agreenum + item.buyFee).toFixed(2)}}</span></text>
						</u-col>
						<u-col span="6">
							<text>中签数量:<span style="color: #409eff;">{{item.agreenum}}</span></text>
						</u-col>
					</u-row>
					<u-row gutter="12" class="padding none" style="font-size: 16px;">
						<u-col span="12">
							<text>申购时间:<span style="color: #409eff;">{{item.atime}}</span></text>
						</u-col>
					</u-row>
					<u-row gutter="12" class="padding none" style="font-size: 16px;" v-if="item.status == 1">
						<u-col span="12">
							<text>最晚缴款日:<span style="color: #409eff;">{{$u.timeFormat(item.lastTime, 'yyyy-mm-dd hh:MM:ss')}}</span></text>
						</u-col>
				<!--	<u-col span="3" >
							<u-button style="height: 25px;" type="error" @click="pay(item)">已入金</u-button>
						</u-col> -->
					</u-row>
					<view class="padding" style="padding: 17rpx 0 4rpx 0;">
						<u-line color="hsla(0,0%,60%,.239)" />
					</view>
				</view>
			</view>
			<view v-else>
				<image class="null" src="@/static/imgs/qidongye_slices/8.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components: {
			searchHead,
		},
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
				// 判断网路
				network: true,
				// 列表数据
				titleBG: {
					backgroundColor: 'hsla(0,0%,60%,.161)',
				},
				data: []
			};
		},
		methods:{
			getMineNewShares() {
				this.$Request.get(this.$api.index.getMineNewShares).then(res => {
					this.data = res.data;
				})
			},
			pay(item){
				this.$Request.post(this.$api.index.pay,{
					buyid:item.id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					this.getMineNewShares();
				})
			}
		},
		onLoad() {
			this.getMineNewShares();
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF !important;
	}
	.all{
		background-color: #FFFFFF !important;
	}
	.bg {
		display: inline-block;
		width: 40rpx;
		height: 32rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.txt-EE515A{
		color: #EE515A !important;
	}
	.txt-2{
		font-family: PingFang-SC-Bold;
		font-weight: Bold;
		color: #333333;
		font-size: 28rpx;
	}
	.txt-3{		
		font-family: PingFang-SC-Bold;
		line-height: 40rpx;
		color: #999999;
		font-size: 24rpx;
	}
	.not_network {
		width: 598rpx;
		height: 693rpx;
		position: absolute;
		top: 64rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}

	.null {
		width: 264rpx;
		height: 284rpx;
		position: absolute;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
	}

	.box {
		margin: 27rpx 20rpx 0 20rpx;
		padding: 30rpx 21rpx 56rpx 30rpx;
		background-color: #FFFFFF;

		.text_box {
			width: 90%;
		}

		.t1 {
			width: 32rpx;
			height: 28rpx;
		}

		.to {
			width: 16rpx;
			height: 28rpx;

		}

		.jianju {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			view {
				flex: 0 1 50%;
			}
		}
	}
</style>
